<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./reset.css">
    <link rel="stylesheet" href="./index.css">
</head>
<body>
<header id="header">
    <strong class="main_tile">认识常用的标签</strong>
</header>
<section>
    <header class="sub_title">h标签</header>
    <h1>学习嘛，好像,,,</h1>
    <h2>学习嘛，好像,,,</h2>
    <h3>学习嘛，好像,,,</h3>
    <h4>学习嘛，好像,,,</h4>
    <h5>学习嘛，好像,,,</h5>
    <h6>学习嘛，好像,,,</h6>
    <section class="notice">
        <header>特点</header>
        <p>字体从h1到h6依次减小，越来越细，权重依次下降，并且独占一行 </p>
    </section>
    <section class="notice">
        <header>注意事项</header>
        <p>h标签的数量有且仅有6个，并且一般情况下h标签在页面中只会允许出现一次</p>
    </section>
</section>
<section>
    <header class="sub_title">p标签</header>
    <p>
        我 太乐意献一吻

        为什么这温柔会犯禁

        若你我可抱着睡

        连命也甘心短几岁

        谁能及我

        将性命也豁出去

        若与你好有罪

        全是律例不对

        我要追
    </p>
    <section class="notice">
        <header>特性</header>
        <p>p代表的段落标签是独占一行的</p>
    </section>
</section>
<section>
    <header class="sub_title">pre标签</header>
    <pre>
        public void run(){
            log.i(tag,"run function");
        }
    </pre>
    <section class="notice">
        <header>特点</header>
        <p>内容区域能够按照我们想要的排布来进行显示，一般情况下，主要用来显示代码区域等</p>
    </section>
</section>
<section>
    <header class="sub_title">br标签</header>
    <br>
    <br>
    换行了嘛
    <br>
    <br>
    <br>
    <section class="notice">
        <p>没有特殊含义，就是换行</p>
    </section>
</section>
<section>
    <header class="sub_title">em和i标签</header>
    <em>第一个是em斜体</em><br>
    <i>第二个是i斜体</i><br>
    <section class="notice">
        <header>注意</header>
        <ul>
            <li>em标签是文字斜体显示，而i标签强调的是斜体效果，并且em标签强调的效果要比i标签更强</li>
            <li>em标签有<strong>优化搜索引擎</strong>的效果,而i标签却没有</li>
            <li>em标签是文字斜体显示，而i标签强调的是斜体效果，并且em标签强调的效果要比i标签更强</li>
        </ul>
    </section>
</section>
<section>
    <header class="sub_title">strong和b标签</header>
    <strong>这是strong标签</strong>
    <b>这是b标签</b>
    <section class="notice">
        <ul>
            <li>strong强调强度强，重要文本。有利搜索引擎优化。b只是文本显示粗体的效果。</li>
            <li>strong的权重更大</li>
            <li>strong粗体文本显示</li>
            <li>b文字粗体显示效果</li>
        </ul>
    </section>
</section>
<section>
    <header class="sub_title">span标签</header>
    这是一个<span style="color:red;background:blue;">没有固定的格式表现，可对其应用样式</span>
    <section class="notice">
        <header>特点</header>
        <p>span标签是一个行级标签(不是独占一行的标签，而是行内显示)</p>
    </section>
</section>
<section>
    <header class="sub_title">sub和sup标签</header>
    x<sub>1</sub><sup>2</sup>+y<sub>1</sub><sup>2</sup> = z<sub>1</sub><sup>2</sup>
    <section class="notice">
        <header>
            特点
        </header>
        <p>sub标签和sup标签主要是用来显示用来进行上标显示和下标显示的</p>
        <p>sub是表示下标显示</p>
        <p>sup是用来表示上标显示</p>
    </section>
</section>
<section>
    <header class="sub_title">del和ins标签</header>
    原价
    <del>998￥</del>
    <br>
    惊爆价
    <ins>558</ins>
    <section class="notice">
        <header>特点</header>
        <p>del标签是在原来文本上面增加了一个横杠，表示删除</p>
        <p>ins标签是在原来文本下面添加了一个下划线，着重表示强调是插入的文本样式</p>
    </section>
</section>
<section>
    <header class="sub_title">a标签</header>
    <a href="http://www.state.com/">http://www.state.com/</a>
    <a href="#header">go to start</a>
    <a href="mailto:953841731@qq.com">mail</a>
    <section class="notice">
        <header>
            特点
        </header>
        <ul>
            <li>a标签是一个超链接标签，默认的a标签在鼠标指上去的时候会有一个手指效果</li>
            <li>a标签是一个行级元素标签 </li>
            <li>a标签有自己的默认的标签样式 </li>
            <li>如果a标签中的href没有指向的话，一般情况下我们都默认它是值为# </li>
            <li>在href链接到外部网站的时候，需要补全http:// </li>
        </ul>
    </section>
    <section class="notice">
        <header>拓展</header>
        <p>在HTML5中链接元素有三种</p>
        <ul>
            <li><a href="index.css">index.css</a></li>
            <li><link href="http://www.baidu.com/"></li>
            <li><nav><a>one</a>|<a>two</a></nav></li>
        </ul>
    </section>
</section>
<section>
    <header class="sub_title">ul ol dl标签</header>
    <header class="sub_title">ul(unordered list)</header>
    <ul>
        <li>北京</li>
        <li>上海</li>
        <li>广州</li>
        <li>深圳</li>
    </ul>
    <ul type="circle">
        <li>北京</li>
        <li>上海</li>
        <li>广州</li>
        <li>深圳</li>
    </ul>
    <ul type="square">
        <li>北京</li>
        <li>上海</li>
        <li>广州</li>
        <li>深圳</li>
    </ul>
    <section class="notice">
        <header>特点</header>
        <ul>
            <li>无序列表是没有顺序的，但是可以通过样式设置来进行修改</li>
            <li>无序列表是有默认样式的，这个可以使用list-style-type:none来进行去除 </li>
            <li>无序列表ul内部只能去嵌套li，不能嵌套别的，li内部可以去再做嵌套操作 </li>
            <li>可以使用type=”disc”(实心圆)type=”square”(方块),type=”circle”(空心圆)来进行无序列表样式的设置</li>
        </ul>
    </section>
    <header class="sub_title">ol(ordered list)</header>
    <ol>
        <li>北京</li>
        <li>上海</li>
        <li>广州</li>
        <li>深圳</li>
    </ol>
    <ol type="A"> <!-- 1|A|a|I|i -->
        <li>北京</li>
        <li>上海</li>
        <li>广州</li>
        <li>深圳</li>
    </ol>
    <section class="notice">
        <header>特点</header>
        <ol>
            <li>有序列表是以ol开始，每个列表项目以li开始</li>
            <li>ol的默认样式为1，2，3显示</li>
            <li>可以通过list-style-type:none；来取消其默认的样式 </li>
            <li>可以通过type来设置其样式类型</li>
        </ol>
    </section>
    <header class="sub_title">dt(自定义列表)</header>
    <dl>
        <dt>计算机</dt>
        <dd>用来计算的仪器 ... ...</dd>
        <dt>显示器</dt>
        <dd>以视觉方式显示信息的装置 ... ...</dd>
        <dd>可以用来展示图像</dd>
    </dl>
</section>
</body>
</html>